<template>
  <Echarts :options="options" id="centerBottomLeft"></Echarts>
</template>

<script>
import Echarts from "@/components/Echarts/index.vue";
import { reactive, watch } from "vue";

export default {
  components: {
    Echarts
  },
  props: {
    chartData: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    let options = reactive({
      legend: {},
      grid: {
        top: "13%",
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: "category",
        data: ["Brazil", "Indonesia", "USA", "India", "China", "World"]
      },
      series: [
        {
          name: "2011",
          type: "bar",
          data: props.chartData.data1
        },
        {
          name: "2012",
          type: "bar",
          data: props.chartData.data2
        }
      ]
    });
    return {
      options
    };
  }
};
</script>